import React, { Component } from 'react'
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import {connect} from 'react-redux'
import {getData} from '../../../store/actions'
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]);
export class Index extends Component {
    componentDidMount(){
        this.props.fetchData()
    }
    render() {
        return (
            <div className="find">
                <div className="lunbo">
                    <Swiper
                        spaceBetween={50}
                        pagination={{ clickable: true }}
                        autoplay={{ clickable: true }}
                        loop={true}
                        autoplay={{ delay: 3000 }}

                    >
                        {
                            this.props.slides && this.props.slides.map((item,index)=>{
                                return <SwiperSlide key ={index}><img src={item.url}></img></SwiperSlide>
                            })
                        }
                        {/* <SwiperSlide><img src="D:\专高node\nckoa后端\uploads\avater-1606705225584-370092724.jpeg"></img></SwiperSlide> */}
                        
                        {/* <SwiperSlide><img src="http://p1.music.126.net/PRe4v8J8ZiNeWq6fbBV_KQ==/109951165479436285.jpg?imageView&quality=89"></img></SwiperSlide>
                        <SwiperSlide><img src="http://p1.music.126.net/g2C9r_i53q387kmBMD0xpg==/109951165479845901.jpg?imageView&quality=89"></img></SwiperSlide>
                        <SwiperSlide><img src="http://p1.music.126.net/MVK417m7E7Lv8brD_gNGSA==/109951165480377359.jpg?imageView&quality=89"></img></SwiperSlide>
                        <SwiperSlide><img src="http://p1.music.126.net/U4aC7WQ91X0cSFsgpb5oFg==/109951165481068028.jpg?imageView&quality=89"></img></SwiperSlide> */}
                    </Swiper>
                </div>
                <div className="title">
                    <ul>
                        <li onClick={()=>this.props.history.push('/recommend')}>
                            <div>
                                <span className="iconfont icon-rili"></span>
                            </div>
                            <p>每日推荐</p>
                        </li>
                        <li onClick={()=>this.props.history.push('/songList')}>
                            <div>
                                <span className="iconfont icon-liebiao"></span>
                            </div>
                            <p>歌单</p>
                        </li>
                        <li onClick={()=>this.props.history.push('/rankingList')}>
                            <div>
                                <span className="iconfont icon-PCbofangye_paihangbang"></span>
                            </div>
                            <p>排行榜</p>
                        </li>
                        <li onClick={()=>this.props.history.push('/diantai')}>
                            <div>
                                <span className="iconfont icon-faxian"></span>
                            </div>
                            <p>电台</p>
                        </li>
                        <li onClick={()=>this.props.history.push('/liveStreaming')}>
                            <div>
                                <span className="iconfont icon-zhibohuifang"></span>
                            </div>
                            <p>直播</p>
                        </li>
                    </ul>
                </div>
                <div className="tuijian">
                    <h1>推荐歌单</h1>
                    <h2>歌单广场</h2>
                </div>
                <div className="list">
                    <ul>
                        <li>
                            <img src="" alt=""/>
                            <p>一个狮子座的听歌列表</p>
                        </li>
                        <li>
                            <img src="" alt=""/>
                            <p>一个狮子座的听歌列表</p>
                        </li>
                        <li>
                            <img src="" alt=""/>
                            <p>一个狮子座的听歌列表</p>
                        </li>
                        <li>
                            <img src="" alt=""/>
                            <p>一个狮子座的听歌列表</p>
                        </li>
                        <li>
                            <img src="" alt=""/>
                            <p>一个狮子座的听歌列表</p>
                        </li>
                        <li>
                            <img src="" alt=""/>
                            <p>一个狮子座的听歌列表</p>
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    console.log(123, state)
    return {
        slides:state.slides
    }
  }
const mapDispatchToProps = (dispatch) => {
    return {
      fetchData() {
        getData(dispatch)
      },
    }
    
  
  }
  export default connect(mapStateToProps, mapDispatchToProps)(Index)
